<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>MarkerCluster Documentation: Examples</title>
    <link rel="stylesheet" type="text/css" href="http://code.google.com/css/codesite.css"></link>
    <link rel="stylesheet" type="text/css" href="http://gmaps-utility-library.googlecode.com/svn/trunk/util/docs/template/local_extensions.css"></link>
    <script type="text/javascript" src="http://code.google.com/js/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1><a name="Marker_Clusterer_Examples" id="Marker_Clusterer_Examples"></a>MarkerClusterer Examples</h1>

<p>To use a marker clusterer, create a <code>MarkerClusterer</code> object. In the simplest case, just pass a map to it.</p>
<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var mc = new MarkerClusterer(map);
</pre>

<p>You may also specify a number of options to fine-tune the marker manager's performance. These options are passed via a <a href="reference.html#MarkerClustererOptions"><code>MarkerClustererOptions</code></a> object.
The <code>MarkerClustererOptions</code> object is an object literal, so you simply declare the object without a constructor:
</p>
<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var mcOptions = {gridSize: 50, maxZoom: 15};
var mc = new MarkerClusterer(map, [], mcOptions);
</pre>

<p>Once you create a marker cluster, you will want to add markers to it. <code>MarkerClusterer</code> supports adding markers using the <code>addMarkers()</code> method or by providing a array of markers to the constructor:</p>
<pre class="prettyprint">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
var mcOptions = { gridSize: 50, maxZoom: 15};
var markers = [...]; // Create the markers you want to add and collect them into a array.
var mc = new MarkerClusterer(map, markers, mcOptions);
</pre>

<h2><a name="Marker_Clusterer" id="Marker_Clusterer"></a>A Simple MarkerClusterer Example:</h2>

<p>This example will show 100 markers on map.</p>

<pre class="prettyprint">
  if(GBrowserIsCompatible()) {
    map = new GMap2($('map'));
    map.setCenter(new GLatLng(39.91, 116.38), 2);
    map.addControl(new GLargeMapControl());

    var markers = [];
    for (var i = 0; i &lt; 100; ++i) {
      var latlng = new GLatLng(data.photos[i].latitude, data.photos[i].longitude);
      var marker = new GMarker(latlng);
      markers.push(marker);
    }
    var markerCluster = new MarkerClusterer(map, markers);
  }
</pre>

<p><a href="../examples/simple_example.html">View example (simple_example.html)</a></p>

<h2>
  <a name="Marker_Clusterer_Advanced" id="Marker_Clusterer_Advanced"></a>
  Advanced MarkerClusterer Example:
</h2>
<p>With this example, you can test <code>MarkerClusterer</code> with different 
max zoom levels, grid size and styles, all the options in <code>MarkerClustererOptions</code>.<br /></p>
<p><a href="../examples/advanced_example.html">View example (advanced_example.html)</a></p>

<h2>
  <a name="Marker_Clusterer_Speed_Test" id="Marker_Clusterer_Speed_Test"></a>
  Speed Test Example
</h2>
<p>This example will compare adding markers with <code>MarkerClusterer</code>
to the normal method of adding markers, and display the time for each.
<p><a href="../examples/speed_test_example.html">View example (speed_test_example.html)</a></p>

<h2>
  <a name="Marker_Clusterer_Value_Option" id="Marker_Clusterer_Value_Option"></a>
  MarkerClusterer with Values Example
</h2>
<p>This example shows how to use another option calculator in <code>MarkerClustererOptions</code>.
You can pass a calculator function to decide what text be showed on a cluster marker and what kind of style
a 89/cluster will use.
<p><a href="../examples/simple_example_with_values.html">View example (simple_example_with_values.html)</a></p>
</body>
</html>
